{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/Sticky_Footer/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"e340be30-25bd-5cc1-a4aa-675b5e6567f1","excerpt":"sticky footer bottom (footer 하단에 고정) min-height: 100% body > contaier > footer인 경우 container가 body height 값을 갖고있지 않을 경우가 있음(body보다 작을 경우)  속성으로 자식 요소를 화면 아래에 배치 flex item에  속성을 적용하면 바깥 여백이 flex item을 위쪽에서 아래쪽으로 밀기 때문에 flex item이 아래쪽에 위치하게 된다. flexbox로 만들 수 있는 10가지 레이아웃 css…","html":"<h4 id=\"sticky-footer-bottom-footer-하단에-고정\" style=\"position:relative;\"><a href=\"#sticky-footer-bottom-footer-%ED%95%98%EB%8B%A8%EC%97%90-%EA%B3%A0%EC%A0%95\" aria-label=\"sticky footer bottom footer 하단에 고정 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>sticky footer bottom (footer 하단에 고정)</h4>\n<div class=\"gatsby-highlight\" data-language=\"scss\"><pre class=\"language-scss\"><code class=\"language-scss\"><span class=\"token selector\">.container </span><span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">min-height</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">flex-direction</span><span class=\"token punctuation\">:</span> column<span class=\"token punctuation\">;</span>\n\n\t<span class=\"token selector\">.footer </span><span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> auto<span class=\"token punctuation\">;</span>\n\t<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<ul>\n<li>\n<p>min-height: 100%</p>\n<ul>\n<li>body > contaier > footer인 경우</li>\n<li>container가 body height 값을 갖고있지 않을 경우가 있음(body보다 작을 경우)</li>\n</ul>\n</li>\n<li>\n<p><code class=\"language-text\">margin-top: auto</code> 속성으로 자식 요소를 화면 아래에 배치</p>\n<p>flex item에 <code class=\"language-text\">margin-top: auto</code> 속성을 적용하면 바깥 여백이 flex item을 위쪽에서 아래쪽으로 밀기 때문에 flex item이 아래쪽에 위치하게 된다.</p>\n</li>\n</ul>\n<blockquote>\n<ul>\n<li><a href=\"https://d2.naver.com/helloworld/8540176\">flexbox로 만들 수 있는 10가지 레이아웃</a></li>\n</ul>\n</blockquote>\n<ul>\n<li><a href=\"https://m.blog.naver.com/PostView.nhn?blogId=eggtory&#x26;logNo=220744380205&#x26;proxyReferer=https%3A%2F%2Fwww.google.com%2F\">css로 footer를 하단에 고정하는 5가지 방법</a></li>\n</ul>","frontmatter":{"title":"Sticky Footer","date":"December 10, 2019"}}},"pageContext":{"slug":"/Today I Learned/Sticky_Footer/","previous":{"fields":{"slug":"/Today I Learned/중앙_정렬/"},"frontmatter":{"title":"중앙 정렬","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/Sticky_Header/"},"frontmatter":{"title":"Sticky Header","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}